﻿@model Inspinia_MVC5.Models.Student

@{
    ViewBag.Title = "新增学生";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>新增学生用户</h2>
        <ol class="breadcrumb">
            <li>
                @Html.ActionLink("所有学生", "Index")
            </li>
            <li class="active">
                <strong>新增学生</strong>
            </li>
        </ol>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            @Html.ActionLink("全部学生信息", "Index", null, new { @class = "btn btn-primary" })
        </div>
    </div>
</div>



<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>新增学生用户</h5>
                </div>
                <div class="ibox-content">

                    @using (Html.BeginForm("Create","Students",FormMethod.Post,new {enctype="multipart/form-data" }))
                    {
                        @Html.AntiForgeryToken()

                        <div class="form-horizontal">
                            @Html.ValidationSummary(true)

                            <div class="form-group">
                                @Html.LabelFor(model => model.StuName, new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.StuName)
                                    @Html.ValidationMessageFor(model => model.StuName)
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.Label("所属班级", new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.DropDownList("ClassId", String.Empty)
                                    @Html.ValidationMessageFor(model => model.ClassId)
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.StuNum, new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.StuNum)
                                    @Html.ValidationMessageFor(model => model.StuNum)
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.StuIdCard, new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.StuIdCard)
                                    @Html.ValidationMessageFor(model => model.StuIdCard)
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.StuPhone, new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.StuPhone)
                                    @Html.ValidationMessageFor(model => model.StuPhone)
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.StuPwd, new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.StuPwd)
                                    @Html.ValidationMessageFor(model => model.StuPwd)
                                </div>
                            </div>
                            <div class="form-group">
                                @Html.Label("上传照片", new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    <div class="fileupload-box">
                                        <p>上传图片:</p>
                                        <div class="img-box">
                                            <input type="file" style="display:none" name="photo" id="uploadfile" accept="image/*" />
                                            <img src="~/Content/Images/addpic.png" id="image">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="保存" class="btn btn-primary" />
                                    @Html.ActionLink("取消", "Index", null, new { @class = "btn btn-white" })
                                </div>
                            </div>
                        </div>
                    }

                </div>
            </div>
        </div>
    </div>
</div>



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
            $(function(){
                $("#image").click(function(){
            $("#uploadfile").click();
            })
            $("#uploadfile").change(function(){

                var files=$(this)[0].files[0];    //获取文件信息
                if(files)
                {
                    var reader=new FileReader();  //调用FileReader
                    reader.onload=function(evt){   //读取操作完成时触发。
                        $("#image").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                    }
                reader.readAsDataURL(files); //将文件读取为 DataURL(base64)
                }
                else{
                    alert("上传失败");
                }
            })
            })
</script>
}
@section Styles{
    <style>
        .fileupload-box
        {
            padding: 5px;
            border: 2px dashed gainsboro;
            height: 180px;
            width: 400px;
            position: relative
        }
        .fileupload-box p
        {
            margin: 5px 0 0 5px;
            
        }
        .img-box{
            position: absolute;
            width: 120px;
            height: 120px;
            left: 0;
            right: 0;
            top: 10px;
            bottom: 0;
            margin:auto;
        }
        .img-box img{
            width: 120px;
            height: 120px;
        }
    </style>
}
